<template>
  <view class="search_item_box">
    <Head title="搜索结果" :transparent="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <view class="search_menu">
      <view class="order_by" @click="switchOrder('')" :class="{active : param.sort === ''}">
        销量
      </view>
      <view class="order_by" @click="switchOrder(param.sort === 'price_asc' ? 'price_des' : 'price_asc')" :class="{active : param.sort.indexOf('price') !== -1}">
        价格
        <text class="iconfont icon-arrow-up" :class="{active_price : param.sort === 'price_asc'}"></text>
        <text class="iconfont icon-xiajiantou" :class="{active_price : param.sort === 'price_des'}"></text>
      </view>
      <view class="only_show_coupon">
        <text class="text">仅显示有优惠卷</text>
        <switch class="switch" checked="param.hasCoupon === 1" @change="switchCoupon"></switch>
      </view>
    </view>
    <ItemListComp class="item_box" :questionList="questionList" :userInfo="userInfo" />
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <NoData v-if="!isLoad && questionList && questionList.length <= 0">
      <view slot="text">没有找到相关商品，换个词再试试吧</view>
    </NoData>
    <ScrollToTop :scrollTop="scrollTop" />
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import NoData from '@/pages/pagecomponents/nodata'
  import ItemListComp from '@/pages/pagecomponents/itemlist'
  import ScrollToTop from '@/pages/pagecomponents/other/scrolltotop'
  export default {
    components: {
      Head,
      NoData,
      ItemListComp,
      ScrollToTop,
    },
    data() {
      return {
        questionList: [],
        param: {
          keyWords: '',
          hasCoupon: 1, // 1仅查优惠券
          pageNo: 1,
          pageSize: 20,
          sort: "", // 销量（total_sales），淘客佣金比率（tk_rate）， 累计推广量（tk_total_sales），总支出佣金（tk_total_commi），价格（price）,排序方式：排序_des（降序），排序_asc（升序）,示例：升序查询销量：total_sales_asc
        },
        isLoad: false,
        finished: false,
        scrollTop: 0, // 页面滚动高度
      }
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    onShareAppMessage(res) {
      // 小程序分享
      return {
        title: `您的好友${this.userInfo.nickName || ''}帮你找到了大宝贝`,
        desc: `${this.appNameCNY}是最好的比价平台，一定要感谢你的朋友`,
        path: `/pages/home/index?redirect=` + encodeURIComponent(`/pages/search/searchresult?keyWords=${this.param.keyWords}`),
      }
    },
    onPageScroll(e) {
      // 滚动条滚动
      this.scrollTop = e.scrollTop
    },
    onPullDownRefresh() {
      // 下拉刷新
      this.getItemList('pullDown')
    },
    onReachBottom() {
      // 触底函数
      this.nextPaging()
    },
    onLoad(options) {
      this.param.keyWords = options.keyWords
      this.getItemList()
    },
    methods: {
      switchCoupon() {
        // 切换是否只搜索优惠券选项
        this.param.hasCoupon = this.param.hasCoupon === 1 ? 0 : 1
        this.reset();
        this.getItemList();
      },
      switchOrder(order) {
        // 切换排序顺序
        this.param.sort = order;
        this.reset();
        this.getItemList();
      },
      reset() {
        // 初始化查询参数
        this.param.pageNo = 1;
        this.questionList = [];
        uni.pageScrollTo({ // 滚动到顶部
          scrollTop: 0
        });
      },
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageNo += 1
          this.getItemList()
        }
      },
      getItemList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.isLoad = true
          this.questionList = []
          this.param.pageNo = 1
        }
        this.isLoad = true
        this.$api.wyapi.superSearch(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          if (res.data && res.data.length <= 0) {
            this.finished = true;
          } else {
            let imgList = res.data
            let questionList = this.questionList
            questionList = questionList.concat(imgList)
            this.questionList = questionList
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .search_item_box {
    position: relative;
    min-height: 100%;
    padding: 145px 40upx 50upx;
    margin-top: var(--status-bar-height);
    .search_menu {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      padding: 0 20upx;
      margin-top: var(--status-bar-height);
      font-size: 35upx;
      z-index: 2000;
      height: 90px;
      background: #ffffff;
      .order_by {
        display: inline-block;
        line-height: 80upx;
        width: 50%;
        text-align: center;
        .icon-arrow-up {
          margin-left: 20upx;
        }
        .iconfont {
          color: #b1b6bd;
        }
        .active_price {
          color: #4b6c92;
          font-weight: 600;
        }
      }
      .active {
        color: #4b6c92;
        font-weight: 600;
        border-bottom: 2px solid #4b6c92;
      }
      .only_show_coupon {
        line-height: 100upx;
        .switch {
          float: right;
        }
      }
    }
    .item_box {
      // min-height: 800px;
    }
    .cu-load::before {
      content: none
    }
  }
</style>
